{extend name="base" /}
{block name="link"}
<title>CAMPAIGN</title>
<link rel="stylesheet" href="/static/club/css/news.css">
{/block}
{block name="content"}

<!-- 主题图片 -->
<div class="container-fluid newsdwai">
	<div class="about-title">
		<img class="img-responsive center-block" src="/uploads/{$banner_pic}">
	</div>
</div>

<div class="container-fluid newsdwai">
	<div class="row" id="my-gallery-container">
		{foreach $list as $key => $val}
		<div class="proimg">
			<img class="img-responsive center-block" src="/uploads/{$val['pic']}">
		</div>
		{/foreach}
	</div>
	<div class="row" id="more">
		<p class="more text-center">
			<img onclick="Next(this)" class="img-responsive center-block" src="/static/club/images/more.png">
		</p>
	</div>
</div>
<input type="hidden" id="page" name="page" value="1" >
<input type="hidden" id="type_id" name="type_id" value="{$type_id}">
<input type="hidden" id="num_page" name="num_page" value="{$num_page}">
{/block}
{block name="js"}
<script>window.jQuery || document.write('<script src="/static/club/js/jquery-3.4.1.min.js"><\/script>')</script>
<script type="text/javascript" src="/static/club/js/mp.mansory.min.js"></script>
<script type="text/javascript">
function Next(e){
	var page = $("#page").val();
	var type_id = $("#type_id").val();
	var num_page = parseInt($("#num_page").val());	//总分页数
	page = parseInt(page) + 1;

	if(page > num_page){
		$("#more").hide();
		return false;
	}

	$.get("{:url('index/ajaxs_camp')}?page="+page+"&type_id="+type_id,function (res,status) {
    	$("#type_id").val(res.data.type_id);
		console.log(res)
		if(res.code == 0 && res.data.list != ''){
			// alert('加载数据')

			var arr = res.data.list;
			var str = '';
			for(var i=0; i<arr.length; i++){
				str += "<div class='proimg'>";
				str += "<img class='img-responsive center-block' src='/uploads/"+arr[i]['pic']+"'>";
				str += "</div>";
    		}
    		var content = $("#my-gallery-container").append(str).fadeIn();
    		$("#page").val(page);

    		$("#my-gallery-container").mpmansory({
				childrenClass: 'proimg', // default is a div
				columnClasses: 'padding', //add classes to items
				breakpoints:{
					lg: 6, 
					md: 6, 
					sm: 6,
					xs: 6
				},
				distributeBy: { order: false, height: false, attr: 'data-order', attrOrder: 'DESC' }, 
				// default distribute by order, options => order: true/false, height: true/false, attr => 'data-order', attrOrder=> 'asc'/'desc'
				onload: function (items) {
					//make somthing with items
				} 
			});
		} else{
			$("#more").hide();
		}
    })
}
jQuery(document).ready(function ( $ ) {
	$("#my-gallery-container").mpmansory(
		{
			childrenClass: 'proimg', // default is a div
			columnClasses: 'padding', //add classes to items
			breakpoints:{
				lg: 6, 
				md: 6, 
				sm: 6,
				xs: 6
			},
			distributeBy: { order: false, height: false, attr: 'data-order', attrOrder: 'DESC' }, 
			// default distribute by order, options => order: true/false, height: true/false, attr => 'data-order', attrOrder=> 'asc'/'desc'
			onload: function (items) {
				//make somthing with items
			} 
		}
	);
});
</script>
<script type="text/javascript">
$(window).scroll(function(){
	var scrollTop = $(this).scrollTop();    //滚动条距离顶部的高度
	var scrollHeight = $(document).height();   //当前页面的总高度
	var clientHeight = $(this).height();    //当前可视的页面高度
	console.log()
	// console.log("top:"+scrollTop+",doc:"+scrollHeight+",client:"+clientHeight);
	if(scrollTop + clientHeight >= scrollHeight){   //距离顶部+当前高度 >=文档总高度 即代表滑动到底部 
	//滚动条到达底部
		// Next(1);
	}else if(scrollTop<=0){
		//滚动条到达顶部
		// alert('滚动条到达顶部')
	}
});
</script>
{/block}